<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="公告标题" prop="title">
					<el-input v-model="state.queryParams.title" placeholder="请输入公告标题" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-row :gutter="10" class="top-block">
				<el-col :span="1.5">
					<el-button type="primary" @click="onOperation({ type: 'add', title: '添加系统公告' }, '')"> 添加 </el-button>
				</el-col>
				<RightToolbar v-model:showSearch="state.showSearch" @queryTable="getList" />
			</el-row>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="公告标题" align="center" prop="title" />
				<el-table-column label="公告时间" align="center" prop="notice_time" :formatter="formatterNoticeTime" />
				<el-table-column label="权限" align="center" prop="status" width="280">
					<template #default="{ row }">
						<template v-if="row.type == 1">
							{{ formatterAuthority(row) }}
						</template>
						<template v-else>
							<div v-for="item in row.user_info" :key="item.id">
								{{ item.nickname }}{{ '—' + item.mobile + ' ' + formatterIdentity(item.identity) + ';' }}
							</div>
						</template>
					</template>
				</el-table-column>
				<el-table-column label="已读" align="center" prop="num_read" />
				<el-table-column label="状态" align="center" prop="status" :formatter="formatterStatus" />
				<el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-popconfirm v-if="row.status == 0" title="您确定发布该通知吗？" @confirm="onRelease(row)" width="180px">
							<template #reference>
								<el-button type="primary" link> 发布 </el-button>
							</template>
						</el-popconfirm>
						<el-button v-if="row.status == 0" type="primary" link @click="onOperation({ type: 'edit', title: '修改系统公告' }, row)">
							修改
						</el-button>
						<el-button type="primary" link @click="onTranslate(row)"> 翻译管理 </el-button>
						<el-popconfirm title="您确定删除该数据？此操作不可撤回" @confirm="onDelete(row)" width="180px">
							<template #reference>
								<el-button type="primary" link> 删除 </el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<OperationDialog ref="operationDialogRef" />
		<TranslateDialog ref="translateDialogRef" />
	</div>
</template>

<script setup lang="ts" name="systemNotice">
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { announcementApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';
import { formatterIdentity } from '/@/utils/utils';

const OperationDialog = defineAsyncComponent(() => import('./dialog/operationDialog.vue'));
const TranslateDialog = defineAsyncComponent(() => import('./dialog/translateDialog.vue'));

const AnnouncementApi = announcementApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		title: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	switchStatus: false,
});
const queryFormRef = ref();
const operationDialogRef = ref();
const translateDialogRef = ref();

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 添加/修改
const onOperation = (data: Object, row: Object) => {
	operationDialogRef.value.openDialog(data, row, () => getList());
};
// 翻译管理
const onTranslate = (row: Object) => {
	translateDialogRef.value.openDialog(row, () => getList());
};
// 发布
const onRelease = (row: any) => {
	_systemAnnouncementRelease({ announcement_id: row.id });
};
// 删除
const onDelete = (row: any) => {
	_systemAnnouncementDelete({ announcement_id: row.id });
};
// 公告时间字典
const formatterNoticeTime = (row: any) => {
	return timeDictionary(row.notice_time);
};
/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_systemAnnouncementList(state.queryParams);
};
// 权限字典
const formatterAuthority = (row: any) => {
	return `${row.authority1 ? '粉丝;' : ''}${row.authority2 ? '铜牌;' : ''}${row.authority3 ? '银牌;' : ''}${row.authority4 ? '金牌' : ''}`;
};
// 状态
const formatterStatus = (row: any) => {
	switch (Number(row.status)) {
		case 0:
			return '未发布';
		case 1:
			return '已发布';
		case -1:
			return '删除';
		default:
			return '未知状态';
	}
};

/********** 网络事件 **********/
// 系统公告列表
const _systemAnnouncementList = (params: Object) => {
	AnnouncementApi.systemAnnouncementList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 删除系统公告
const _systemAnnouncementDelete = (params: Object) => {
	AnnouncementApi.systemAnnouncementDelete(params).then(() => {
		ElMessage.success('操作成功！');
		getList();
	});
};
// 发布系统公告
const _systemAnnouncementRelease = (params: Object) => {
	AnnouncementApi.systemAnnouncementRelease(params).then(() => {
		ElMessage.success('操作成功！');
		getList();
	});
};
</script>
